<template>
  <div class="container">
    <div class="top-div">
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        案号
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input1" placeholder="请输入案号" style="width: 160px;"></el-input>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        标题
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input2" placeholder="请输入标题" style="width: 160px;"></el-input>
      </div>
      <!--      <div style="float: left;line-height: 40px;margin-left: 10px;">-->
      <!--        案件类型-->
      <!--        <el-select v-model="caseType" placeholder="请选择案件类型" style="width: 100px;margin-left: 10px;"-->
      <!--                   @change="caseTypeChange">-->
      <!--          <el-option-->
      <!--              v-for="item in caseTypeList"-->
      <!--              :key="item.value"-->
      <!--              :label="item.label"-->
      <!--              :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </div>-->
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        案件类型
      </div>
      <div style="float: left;margin-left: 5px;">
        <el-input v-model="input3" placeholder="请输入案件类型" style="width: 160px;"></el-input>
      </div>
      <div style="float: left;line-height: 40px;margin-left: 10px;">
        风险类型
        <el-select v-model="value" placeholder="请选择案件风险类型" style="width: 120px;margin-left: 10px;"
                   @change="sortChange">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>

      <el-button type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="searchCases">搜索</el-button>
      <el-button icon="el-icon-refresh" style="margin-left: 10px;" @click="resetTable"></el-button>
    </div>
    <el-table :data="tableData" style="width: 100%;height: calc(100vh - 165px);overflow-y: auto;">
      <el-table-column label="案号" align="center" min-width="60">
        <template slot-scope="scope">
          <span>{{ scope.row.case_no }}</span>
        </template>
      </el-table-column>
      <el-table-column label="风险值" align="center" prop="risk" sortable min-width="50">
        <template slot-scope="scope">
          <div v-if="scope.row.total_risk_change_value>0" style="display: flex;justify-content: center;">
            <div style="float: left;margin-top: 10px">
              <span>{{ scope.row.total_risk }}</span>
            </div>
            <div style="float: left;">
              <img src="@/assets/up.png" style="width: 20px;height: 20px;margin-top: 10px;">
              <span style="color: #e54e4f;font-size: 10px;position: absolute;margin-bottom: 100px;">+{{
                  scope.row.total_risk_change_value
                }}</span>
            </div>
          </div>
          <div v-else-if="scope.row.total_risk_change_value == 0" style="display: flex;justify-content: center;">
            <div style="float: left;margin-bottom: 10px">
              <span>{{ scope.row.total_risk }}</span>
            </div>
          </div>
          <div v-else style="display: flex;justify-content: center;">
            <div style="float: left;margin-bottom: 10px">
              <span>{{ scope.row.total_risk }}</span>
            </div>
            <div style="float: left;">
              <img src="@/assets/down.png" style="width: 20px;height: 20px;margin-bottom: 10px;">
              <span style="color: #1ce229;font-size: 10px;position: absolute;margin-bottom: 100px;padding-top: 5px;">{{
                  scope.row.total_risk_change_value
                }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center" min-width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="案件类型" align="center" min-width="40">
        <template slot-scope="scope">
          <span>{{ scope.row.case_category }}</span>
        </template>
      </el-table-column>
      <el-table-column label="案由" align="center" min-width="40">
        <template slot-scope="scope">
          <span>{{ scope.row.case_type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="案件特征" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.case_features }}</span>
        </template>
      </el-table-column>
      <el-table-column label="风险值1" align="center" min-width="50" prop="risk1" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.risk1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="风险值2" align="center" min-width="50" prop="risk2" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.risk2 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="风险值3" align="center" min-width="50" prop="risk3" sortable>
        <template slot-scope="scope">
          <span>{{ scope.row.risk3 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <span style="color: #409EFF;cursor:pointer;" @click="showDetail(scope.row)">详情</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px auto;width: 500px;">
      <el-pagination background
                     @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-size="pageSize" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import api from '@/utils/api';
import * as echarts from "echarts";
import axios from 'axios'
import data from "@/assets/data1.json";
import user from "@/json/db/user.json";

export default {
  mounted() {
    this.addLog()

    this.initTable()
  },
  computed: {},
  data() {
    return {
      caseTypeList: [
        {
          value: '全部',
          label: '全部'
        },
        {
          value: '民事',
          label: '民事'
        },
        {
          value: '刑事',
          label: '刑事'
        },
        {
          value: '行政',
          label: '行政'
        }
      ],
      caseType: '全部',
      options: [{
        value: '全部',
        label: '全部'
      }, {
        value: '仅风险上升',
        label: '仅风险上升'
      }, {
        value: '仅风险下降',
        label: '仅风险下降'
      }],
      value: '全部',
      currentPage: 1,
      total: 0,
      pageSize: 10,
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      tableData: [],
      sourceTableData: []
    }
  },
  methods: {
    addLog() {
      const user = require("@/json/db/user.json")
      const obj = {}
      obj.module = '案件风险数据'
      obj.content = '查看了【案件风险详情】'
      obj.userName = user.userName
      api.addLog(obj);
    },
    showDetail(item) {
      console.log(item)
      const data = {
        doc_id: item.doc_id,
        case_no: item.case_no,
        procedure: item.procedure,
        case_category: item.case_category,
        case_type: item.case_type,
        first_instance: item.first_instance,
        dispute_focus: item.dispute_focus,
        bottomDataList :item.parties
      }
      localStorage.setItem("detailKey",JSON.stringify(data))
      this.$router.push({
        path: '/detail'
      })
    },
    sortChange(val) {
      var data = require('@/json/data/案件数据.json')
      this.tableData = data
      if (val == '全部') {
        this.total = this.tableData.length
        this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
      } else if (val == '仅风险上升') {
        this.tableData = this.tableData.filter(d => d.total_risk_change_value > 0);
        this.total = this.tableData.length
        this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
      } else if (val == '仅风险下降') {
        this.tableData = this.tableData.filter(d => d.total_risk_change_value < 0);
        this.total = this.tableData.length
        this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
      }
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
      this.initTable();
    },
    //切换当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initTable();
    },
    getNeedArr(array, size) {
      const length = array.length;
      if (!length || !size || size < 1) {
        return [];
      }
      let index = 0;
      let resIndex = 0;
      let result = new Array(Math.ceil(length / size));
      while (index < length) {
        result[resIndex++] = array.slice(index, (index += size));
      }
      return result;
    },
    formattedFeatures(tableFeatures) {
      return tableFeatures.map(feature => feature + '<br>').toString().replaceAll("[", "")
          .replaceAll("]", "")
          .replaceAll(",", "")
          .replaceAll("\"", "");
    },
    initTable() {
      var data = require('@/json/data/案件数据.json')
      this.tableData = data
      this.total = this.tableData.length
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    },
    resetTable() {
      var data = require('@/json/data/案件数据.json')
      this.tableData = data
      this.total = this.tableData.length
      this.pageSize = 10
      this.currentPage = 1
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    },
    searchCases() {
      var data = require('@/json/data/案件数据.json')
      this.tableData = data
      if (this.input1) {
        this.tableData = this.tableData.filter(item => item.case_no.includes(this.input1));
      }

      if (this.input2) {
        this.tableData = this.tableData.filter(item => item.title.includes(this.input2));
      }

      if (this.input3) {
        this.tableData = this.tableData.filter(item => item.case_category.includes(this.input3));
      }

      this.total = this.tableData.length
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    }
  }
};
</script>
<style scoped>
.container-footer {
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding-top: 10px;
}

.top-div {
  min-width: 1200px;
  height: 50px;
  padding: 10px;
}

.el-input {
  font-size: 13px;
}

.container {
  min-width: 1200px;
  display: block;
  clear: both;
}

.clearfix:after {
  clear: both
}

/deep/ .el-table .el-table__header th,
.el-table .el-table__header tr,
.el-table .el-table__header td {
  background: #f5f8fd;
}


</style>